<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
  <script src="bootstrap/js/bootstrap.js"></script>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
</head>
<body>
<form class="form-horizontal">
  <div class="form-group" style="padding-top: 10px">
    <label for="inputTitle" class="col-sm-2 control-label">商品标题</label>
    <div class="col-sm-10">
      <input type="text" style="width: 80%" class="form-control" id="inputTitle" placeholder="请输入商品标题">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPrice" class="col-sm-2 control-label">商品价格</label>
    <div class="col-sm-10">
      <input type="text" style="width: 80%" class="form-control" id="inputPrice" placeholder="请输入商品价格">
    </div>
  </div>
  <div class="form-group">
    <label for="inputDescr" class="col-sm-2 control-label">商品描述</label>
    <div class="col-sm-10">
      <textarea cols="90" rows="10" id="inputDescr"></textarea>
    </div>
  </div>
  <div class="form-group">
    <label for="file" class="col-sm-2 control-label">商品图片</label>
    <div class="col-sm-10">
      <input type="file" style="width: 60%" class="form-control" id="file" onchange="uploadImg()">
      <!-- 商品上传完毕后要即时显示上传效果 -->
      <img src="" id="myimg" style="width: 100px;">
    </div>
  </div>
</form>//ggg
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="button" class="btn btn-primary" onclick="addGoods()">保存</button>
  </div>
</div>
</body>
</html>
<script>
  function addGoods () {
    // 获取商品信息
    // 获取商品标题
    let title = document.getElementById('inputTitle').value
    let inputPrice = document.getElementById('inputPrice').value
    let inputDescr = document.getElementById('inputDescr').value
    let inputImg = document.getElementById('myimg').src

    // 发送请求
    $.ajax({
      url: 'addGoods',
      type: 'POST',
      data: {
        'title': title,
        'price': inputPrice,
        'descr': inputDescr,
        'img': inputImg,
        'mid': 1
      },
      success: function (res) {
        alert('添加成功' + res)
      }
    })
  }

  function uploadImg () {
    const client = new OSS({
      // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
      region: "oss-cn-hangzhou",
      authorizationV4: true,
      // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
      accessKeyId: "LTAI5tG3eQXyx5mGWETMs3sq",
      accessKeySecret: "FvvU3Zrg2tFnbqi3ICRyppKwgqAr9X",
      // 从STS服务获取的安全令牌（SecurityToken）。
      // stsToken: "yourSecurityToken",
      // 填写Bucket名称。
      bucket: "dwjm",
    });

    const data = file.files[0];
    putObject(data);

    async function putObject(data) {
      try {
        // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
        // 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
        // data对象可以自定义为file对象、Blob数据或者OSS Buffer。
        const options = {
          meta: { temp: "demo" },
          mime: "json",
          headers: { "Content-Type": "text/plain" },
        };
        let img_data = document.getElementById("file").value
        const result = await client.put(img_data, data, options);
        console.log(result);
        document.getElementById("myimg").src = result.url
      } catch (e) {
        console.log(e);
      }
    }
  }
</script>
